<template>
  <div id="stopdialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :isshowconfirmbtn="false"
      :dialogWidth="'40%'"
      :enterTitle="false"
      :isshowimportTitle="false"
      :dialogTitle="`学员退款-${dialogparams.name}`"
      @closetextDialog="closetextDialog"
      @confirmbtn='confirmbtn'
      :topHeight='"20vh"'
      :isabledconfirm='isabled'
    >
    <!-- 表单区域 -->
     <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="90px">
       <el-form-item label="退款金额" prop="cost_money">
         <el-input v-model="formData.cost_money" placeholder="请输入退款金额" :disabled="true" clearable :style="{width: '100%'}">
             <template slot="append">元</template>
         </el-input>
       </el-form-item>
       <el-form-item label="退款类型" prop="cost_type">
         <el-input v-model="formData.cost_type" placeholder="请输入退款类型" :disabled="true" clearable :style="{width: '100%'}">
         </el-input>
       </el-form-item>
       <el-form-item label="退款原因" prop="cost_reason">
         <el-input v-model="formData.cost_reason" placeholder="请输入退款原因" :disabled="true" clearable :style="{width: '100%'}">
         </el-input>
       </el-form-item>
       <el-form-item label="费用信息" prop="priceinfo">
         <ul class="moneylist" >
           <li>
             <span style="color:#F56C6C;">退款：{{formData.cost_money||0}}元</span>
           </li>
         </ul>
       </el-form-item>
       <el-form-item label="退款方式" prop="pay_typeprice">
         <div class="paytypearea">

           <el-input
            v-for="(item,index) in pay_typeOption"
            :key="index"
             v-model="paytypeprice[item.alias]"
             class="payTypeinput"
             placeholder="金额"
             :disabled="isdisablepay"
             :style="{ width: '20%' }"
             @input="paypriceinput"
           >
             <template slot="prepend">{{item.title}}</template>
           </el-input>
         </div>
       </el-form-item>
       <el-form-item label="退款时间" prop="cost_time">
         <el-date-picker v-model="formData.cost_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
           :style="{width: '100%'}" placeholder="请选择退款时间" clearable></el-date-picker>
       </el-form-item>
     </el-form>


    </commonformdialog>
  </div>
</template>

<script>
//引入弹窗
import commonformdialog from '@/components/commondialog/commondialog'
import { getSessionStorage } from '@/utils/accessToken'
//utils
import {isObjectvalue} from '@/utils'
//API
import {getRefund,approvalRefund} from '@/api/student'
export default {
  data() {
    //支付方式验证
    var validatepay = (rule, value, callback) => {
       if(!isObjectvalue(this.paytypeprice)){
         callback(new Error('请输入支付方式'));
       }else{
         callback()
       }
      };
    var priceinfo = (rule, value, callback)=>{
       callback()
    }
    return {
      //是否禁用确认按钮
      isabled:true,
      //是否禁用输入支付方式
      isdisablepay:false,
      //支付方式
      paytypeprice: {
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      },

      formData: {
              cost_money: '',
              cost_reason: '',
              cost_time: '',
              cost_type:''
            },
            pay_typeOption:[],
            rules: {
              pay_typeprice:[
                 {
                   required: true,
                   validator: validatepay,
                   trigger: 'change'
                }
              ],
              priceinfo:[
                {
                   required: true,
                   validator: priceinfo,
                   trigger: 'change'
                }
              ],
              cost_reason:[
                {
                  required: true,
                  message: '请选择退款原因',
                  trigger: 'change'
                }
              ],
              cost_money: [{
                required: true,
                message: '请输入退款金额',
                trigger: 'blur'
              }],
              cost_type: [{
                required: true,
                message: '请选择退款类型',
                trigger: 'change'
              }],
              cost_time: [{
                required: true,
                message: '请选择退款时间',
                trigger: 'change'
              }],
            },
            field102Options: [{
              "label": "选项一",
              "value": 1
            }, {
              "label": "选项二",
              "value": 2
            }],
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
    },
    //弹窗参数
    dialogparams:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    //退款数据
    reDate:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  methods:{
    //监听支付方式输入
    paypriceinput(val){
      console.log(val)
      if(this.refund>this.formData.cost_money){
         this.$message.info('输入的金额不能大于交费金额！')
         this.paytypeprice={
        wechat: '',
        alipay:'',
        money:'',
        pos:'',
        other:'',
        transfer:''
      }
         this.isdisablepay = false
      }else if(this.refund==this.formData.cost_money){
        this.isdisablepay = true
        this.isabled = false
      }
    },
      //关闭弹窗
    closetextDialog() {
      this.$refs['elForm'].resetFields()
      this.paytypeprice = {
          wechat: '',
          alipay:'',
          money:'',
          pos:'',
          other:'',
          transfer:''
        }
      this.formData.cost_money = ''
      this.isdisablepay = false
      this.$emit('closetextDialog')
    },
    //点击确认
    confirmbtn(){
        this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        let params = {
            id:this.reDate.id,
            student_id:this.dialogparams.id,
            pay_type:this.paytypeprice,
            cost_time:this.formData.cost_time,
            cost_type:this.reDate.cost_type.value
        }
        let data = await approvalRefund(params)
        if(data.code=='0000'){
          this.$message.success('退款成功！')
          this.$refs['elForm'].resetFields()
          this.paytypeprice = {
              wechat: '',
              alipay:'',
              money:'',
              pos:'',
              other:'',
              transfer:''
            }
          this.formData.cost_money = ''
          this.isdisablepay = false
          this.$emit('confirmretreat')
        }
      })

    }
  },
  mounted() {
    //交费方式
    this.pay_typeOption = getSessionStorage('Options')[15]
  },
  computed:{
    refund(){
      let paypreic = Object.values(this.paytypeprice);
      let total = 0;
      paypreic.forEach((item,index)=>{
        total+= Number(item)
      })
      return total
    }
  },
  watch:{
    async dialogparams(val){

    },
    reDate(val){

      this.formData.cost_money =val.cost_money
      this.formData.cost_reason = val.cost_reason.title
      this.formData.cost_type = val.cost_type.title
    }
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep {
    .paytypearea .el-input__inner {
      padding-right: 15px !important;
      width: 81px;
    }
    .el-input-group__append {
      color: #999 !important;
    }
    .el-input-group__prepend {
      background-color: #f5f7fa;
      color: #909399 !important;
      vertical-align: middle;
      display: table-cell;
      position: relative;
      padding: 0 9px !important ;
      width: 1px;
      white-space: nowrap;
    }
  }
.moneylist {
  // margin: 5px 0 20px 0;
  display: flex;
  // margin-left: 20px;
  li {
    margin-right: 30px;
  }
}
.payTypeinput {
  padding: 0 !important;
  margin-right: 10px;
  width:40px !important;
  margin-bottom: 20px;
  &:last-child{
    margin-bottom: 0;
  }
}
</style>
